<template>
	<view class="jk-page-container bg">
		<jkSearchBar
            :search-val.sync="searchParams.machineCode"
            :searchLeftItemName="searchParams.workshopName"
			:searchRightItemName="searchParams.processName"
            placeholder="设备编号"
            @search="onSearchBtn"
            @search-left-item="selectWorkshopPopupOptionState = true"
            @search-right-item="selectProcessPopupOptionState = true"
        ></jkSearchBar>

		<view class="column-list-container">
			<view v-for="(item) in tableData" :key="item.id" class="column-list-item">
				<view class="column-list-item-default flex-between-center">
					<view class="column-list-item-title flex-start-center">{{ item.machineCode || '无' }}</view>
					<u-tag
                        :text="item.repairStateName"
						:type="!item.repairState ? 'warning' : item.repairState === 1 ? 'primary' : 'success'"
						plain size="mini" icon="tags-fill"
                    ></u-tag>
				</view>
				<view class="column-list-item-default column-list-item-sub-title">维修单号：{{ item.code || '无' }}</view>
				<view class="column-list-item-default column-list-item-sub-title text-ellipsis">故障描述：{{ item.faultDescription || '无' }}</view>
				<view class="column-list-item-default column-list-item-sub-title">报修人员：{{ item.callName || '无' }}</view>
				<view class="column-list-item-default column-list-item-sub-title flex-between-center">
					<view class="flex-start-center">报修时间：{{ item.callTime || '无' }}</view>
				</view>
                <view class="column-list-item-default column-list-item-sub-title">维修人员：{{ item.actualRepairmanName || '无' }}</view>
				<view style="font-weight: 300;">
					<u-button
                        v-if="item.repairState === 0"
                        type="text"
						:disabled="item.faultState"
                        size="normal"
                        @click="onToReceiveBtn(item)"
                    >接单</u-button>
					<u-button
                        v-else-if="item.repairState === 1"
                        type="text"
						:disabled="item.faultState"
                        size="normal"
                        @click="onToEndBtn(item)"
                    >完成维修</u-button>
				</view>
			</view>
			<jk-no-more :pageIndex="searchParams.pageNo" :show="isNoMore" />
		</view>
        <jkPopupOption
            :show="selectWorkshopPopupOptionState"
            :optionList="workshopList"
            @visible-change="(e) => selectWorkshopPopupOptionState = e"
            @confirm="onConfirmOfSelectWorkshop"
        ></jkPopupOption>
        <jkPopupOption
            :show="selectProcessPopupOptionState"
            :optionList="processList"
            @visible-change="(e) => selectProcessPopupOptionState = e"
            @confirm="onConfirmOfSelectProcess"
        ></jkPopupOption>
	</view>
</template>

<script>
import {
    machineManagerRepairOrderTaking,
    repairOrderList
} from "../../../../api";
	import {
		isLastPage,
		pageConfig,
		showLoading
	} from "../../../../utils/jk-utils";
	import loadingMore from '../../../../mixins/loading-more';
	import jkNoMore from "../../../../jk-components/jk-no-more";
	import repairState from "./components/repair-state";
	import jkSearchBar from "../../../../jk-components/jk-search-bar";
import jkPopupOption from "../../../../jk-components/jk-popup-option";
	export default {
		mixins: [loadingMore],
		components: {
            jkPopupOption,
            jkNoMore,
			repairState,
			jkSearchBar
		},
		data() {
			return {
				apiConfig: {
					list: repairOrderList
				},
                selectProcessPopupOptionState: false,
                processList: [],
				repairStateConfig: {
					0: '待接单',
					1: '维修中',
					2: '已完成',
				},
				upkeepStateConfig: {
					0: {
						name: '待开始'
					},
					1: {
						name: '保养中'
					},
					2: {
						name: '保养完成'
					},
				},
				searchParams: {
                    pageNo: 1,
					pageSize: pageConfig.pageSize,
					totalCount: pageConfig.totalCount,
					machineCode: '',
					workshopId: '',
					workshopName: '',
					processId: '',
					processName: '',
                    repairStateList: []
				},
                selectWorkshopPopupOptionState: false,
				tableData: [],
				workshopList: [],
			}
		},
		onLoad(e) {
            // this.searchParams.repairStateList = [e.state ? Number(e.state) : 0];
            this.searchParams.repairStateList = e.state;
		},
		onShow() {
            if (!this.searchParams.workshopId) {
                // this.$set(this.searchParams, 'workshopId', getApp().globalData.defaultWorkshop.id);
                // this.$set(this.searchParams, 'workshopName', getApp().globalData.defaultWorkshop.name);
            }
            this.processList = [
                { id: '-1', name: '全部' },
                ...getApp().globalData.defaultProcess.list
            ];
            this.workshopList = [
                { id: '-1', name: '全部' },
                ...getApp().globalData.defaultWorkshop.list
            ];
            this.getDependentData();
		},
		methods: {
            onConfirmOfSelectProcess(e, item) {
                this.$set(this.searchParams, 'pageNo', 1);
                this.$set(this.searchParams, 'processId', item.id);
                this.$set(this.searchParams, 'processCode', item.code);
                this.$set(this.searchParams, 'processName', item.name);
                this.selectProcessPopupOptionState = false;
                this.getListRequest();
            },
            onConfirmOfSelectWorkshop(e, item) {
                this.$set(this.searchParams, 'pageNo', 1);
                this.$set(this.searchParams, 'workshopId', item.id);
                this.$set(this.searchParams, 'workshopCode', item.code);
                this.$set(this.searchParams, 'workshopName', item.name);
                this.selectWorkshopPopupOptionState = false;
                this.getListRequest();
            },
			onClearOfSearchIpt() {
				this.$set(this.searchParams, 'name', '');
				this.onSearchBtn();
			},
			onToReceiveBtn(item) {
			    let _this = this;
				uni.showModal({
                    title: `提示`,
                    content: `确定接单(${item.code})吗？`,
                    success(res) {
					    if (res.confirm) {
                            machineManagerRepairOrderTaking({id: item.id}).then(res => {
                                if (res.data.status === 200) {
                                    _this.getListRequest();
                                }
                            })
                        }
                    }
				});
			},
			onToEndBtn(item) {
				uni.navigateTo({
					url: `/pages/upkeepAndRepair/repair/receivingOrders/toReceive?id=${ item.id }&repairState=1`
				});
			},
			onSearchBtn(e) {
				this.$set(this.searchParams, 'name', e);
				this.getListRequest();
			},
			async getDependentData() {
				showLoading(true);
				this.searchParams.pageNo = 1;
				await this.getListRequest();
				showLoading(false);
			},
			getListRequest() {
				showLoading(true);
				this.searchParams.pageNo = 1;
				let params = JSON.parse(JSON.stringify(this.searchParams));
                delete params.workshopName;
                delete params.workshopCode;
                delete params.processName;
                delete params.totalCount;
                this.tableData = [];
                return this.apiConfig['list'](params).then(res => {
					showLoading(false);
					if (res.data.status === 200) {
						this.$set(this.searchParams, 'totalCount', res.data.count);
						this.tableData = res.data.res.map(x => {
							x.repairStateName = this.repairStateConfig[x.repairState];
							return x;
						});
						this.isNoMore = isLastPage(this.searchParams.totalCount, this.searchParams.pageSize, this.searchParams.pageNo);
					}
				})
			},
			onClickWorkshop() {
				let _this = this;
				uni.showActionSheet({
					itemList: _this.workshopList.map(x => x.workshopName),
					success(res) {
						_this.$set(_this.searchParams, 'workshopId', _this.workshopList[res.tapIndex].workshopId);
						_this.$set(_this.searchParams, 'workshopName', _this.workshopList[res.tapIndex]
							.workshopName);
						_this.getListRequest();
					}
				});
			}
		},
		onReachBottom() {
			this.getMore();
		}
	}
</script>

<style lang="scss" scoped>
</style>
